<template>
  <div class="app-container">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="mini" v-hasPermi="['system:checkCustom:add']"
          @click="handleAdd"
        >添加
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table v-loading="loading" :data="dataList">
      <el-table-column label="迎检计划标题" :show-overflow-tooltip="true" prop="title" key="title" align="center"/>
      <el-table-column label="制定部门" :show-overflow-tooltip="true" prop="deptName" key="deptName" align="center"/>
      <el-table-column label="联系人" :show-overflow-tooltip="true" prop="deptLiaison" key="deptLiaison" align="center"/>
      <el-table-column label="联系电话" :show-overflow-tooltip="true" prop="deptLiaisonTel" key="deptLiaisonTel" align="center"/>
      <el-table-column label="联系地址" :show-overflow-tooltip="true" prop="deptLiaisonAddress" key="deptLiaisonAddress" align="center"/>
      <el-table-column label="排序号" align="center" prop="sort"/>
      <el-table-column label="制定时间" prop="createTime" align="center">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" class-name="small-padding fixed-width" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            @click="handleEdit(scope.row)"
            v-hasPermi="['system:checkCustom:edit']"
          >修改</el-button>
          <el-button
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:checkCustom:remove']"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog :title="title" :visible.sync="open" width="950px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="迎检计划标题:" prop="title">
          <el-input v-model="form.title" placeholder="请输入迎检计划标题"/>
        </el-form-item>
        <el-form-item label="制定部门:" prop="deptId">
<!--          <treeselect v-model="form.deptId" :options="optionSelect" :show-count="true" placeholder="请选择制定部门"/>-->
          <el-select v-model="form.deptId" placeholder="请选择部门" clearable style="width: 100%">
            <el-option
              v-for="item in optionSelect"
              :key="item.id"
              :label="item.deptName"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
<!--        <el-form-item label="联系人:" prop="liaison">-->
<!--          <el-input v-model="form.liaison" placeholder="请输入部门联系人"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="联系电话:" prop="liaisonTel">-->
<!--          <el-input v-model="form.liaisonTel" placeholder="请输入联系电话"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="联系地址:" prop="liaisonAddress">-->
<!--          <el-input v-model="form.liaisonAddress" placeholder="请输入联系地址"/>-->
<!--        </el-form-item>-->
        <el-form-item label="迎检计划内容:" prop="richText">
          <editor v-model="form.richText" :min-height="192"/>
        </el-form-item>
        <el-form-item label="政策文件:" prop="contentFile">
          <custom-file-upload v-model="form.contentFile"/>
        </el-form-item>
<!--        <el-form-item label="是否按月展示:" prop="isMonthShow">-->
<!--          <el-radio-group v-model="form.isMonthShow">-->
<!--            <el-radio label="0">否</el-radio>-->
<!--            <el-radio label="1">是</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item v-if="form.isMonthShow === '0'" label="迎检计划内容:" prop="checkContent">-->
<!--          <el-card>-->
<!--            <template v-for="(item, index) in noMonthItems">-->
<!--              <div style="display: flex; justify-content: space-between; align-items: center;">-->
<!--                <span>{{ index + 1 }}、{{ item.title }}</span>-->
<!--                <div style="display: flex; gap: 1px;">-->
<!--                  <el-button @click="noMonthEditItemChild(index)" type="text">编辑</el-button>-->
<!--                  <el-button @click="noMonthRemoveItemChild(index)" type="text">删除</el-button>-->
<!--                  <el-button @click="noMonthViewItemChild(index)" type="text">详情</el-button>-->
<!--                </div>-->
<!--              </div>-->
<!--            </template>-->
<!--            <el-button @click="addItemChildNoMonth" type="text">新增检查项目</el-button>-->
<!--          </el-card>-->
<!--        </el-form-item>-->
<!--        <el-form-item v-if="form.isMonthShow === '1'" label="迎检计划内容:" prop="checkContent">-->
<!--          <el-timeline>-->
<!--            <el-timeline-item-->
<!--              v-for="(item, index) in timelineItems"-->
<!--              :key="index"-->
<!--              :timestamp="item.isEditing ? '' : item.timestamp"-->
<!--              placement="top"-->
<!--            >-->
<!--              <el-card>-->
<!--                <div v-if="item.isEditing">-->
<!--                  <el-input v-model="item.timestamp" placeholder="请输入月份（例如：04月）"/>-->
<!--                </div>-->
<!--                <div v-else>-->
<!--                  <template v-for="(itemChild, indexChild) in item.list">-->
<!--                    <div style="display: flex; justify-content: space-between; align-items: center;">-->
<!--                      <span>{{ indexChild + 1 }}、{{ itemChild.title }}</span>-->
<!--                      <div style="display: flex; gap: 1px;">-->
<!--                        <el-button @click="editItemChild(item, indexChild)" type="text">编辑</el-button>-->
<!--                        <el-button @click="removeItemChild(item, indexChild)" type="text">删除</el-button>-->
<!--                        <el-button @click="viewItemChild(item, indexChild)" type="text">详情</el-button>-->
<!--                      </div>-->
<!--                    </div>-->
<!--                  </template>-->
<!--                  <el-button @click="addItemChild(item)" type="text">新增检查项目</el-button>-->
<!--                </div>-->
<!--              </el-card>-->
<!--              <div class="button-container">-->
<!--                <el-button-->
<!--                  @click="toggleEdit(index)"-->
<!--                  size="mini"-->
<!--                  type="warning"-->
<!--                  style="margin-top: 10px;"-->
<!--                >{{ item.isEditing ? '保存' : '编辑' }}-->
<!--                </el-button>-->
<!--                <el-button-->
<!--                  @click="removeTimelineItem(index)"-->
<!--                  size="mini"-->
<!--                  type="danger"-->
<!--                  style="margin-top: 10px;"-->
<!--                >删除-->
<!--                </el-button>-->
<!--              </div>-->
<!--            </el-timeline-item>-->
<!--          </el-timeline>-->
<!--          <el-button @click="addTimelineItem" type="primary" size="mini">新增时间线项</el-button>-->
<!--        </el-form-item>-->
        <el-form-item label="排序:" prop="sort">
          <el-input-number v-model="form.sort" controls-position="right" :min="0"/>
        </el-form-item>
      </el-form>
      <span slot="footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
      </span>
    </el-dialog>
<!--    <el-dialog :visible.sync="dialogVisible" :title="dialogVisibleTitle">-->
<!--      <el-form :model="newItemChild" label-width="130px">-->
<!--        <el-form-item label="检查事项标题:">-->
<!--          <el-input v-model="newItemChild.title"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查事项内容:">-->
<!--          <el-input type="textarea" rows="2" v-model="newItemChild.content" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查事项类型:">-->
<!--          <el-input v-model="newItemChild.type"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="是否涉企检查事项:">-->
<!--          <el-radio-group v-model="newItemChild.isEnterprise">-->
<!--            <el-radio label="0">否</el-radio>-->
<!--            <el-radio label="1">是</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="法定依据:">-->
<!--          <el-input v-model="newItemChild.law"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查清单:">-->
<!--          <div v-for="(inv, index) in newItemChild.inventory" :key="index" style="display: flex; align-items: center; margin-bottom: 5px;">-->
<!--            <el-input v-model="inv.item" style="width: 90%;" />-->
<!--            <el-button @click="removeInventory(index)" type="danger" size="mini" style="margin-left: 10px;">删除</el-button>-->
<!--          </div>-->
<!--          <el-button @click="addInventory" type="success" size="mini">新增清单</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="责任单位:">-->
<!--          <el-input v-model="newItemChild.checkAgency"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="执法（检查）人员:">-->
<!--          <el-input v-model="newItemChild.lawEnforcer"/>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <span slot="footer">-->
<!--        <el-button @click="dialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="saveItemChild">保存</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
<!--    <el-dialog :visible.sync="dialogVisibleDetail" title="迎检项目详情">-->
<!--      <el-form :model="newItemChild" label-width="130px">-->
<!--        <el-form-item label="检查事项标题:">-->
<!--          <el-input v-model="newItemChild.title" readonly/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查事项内容:">-->
<!--          <el-input type="textarea" rows="2" v-model="newItemChild.content" readonly/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查事项类型:">-->
<!--          <el-input v-model="newItemChild.type" readonly/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="是否涉企检查事项:">-->
<!--          <el-radio-group v-model="newItemChild.isEnterprise">-->
<!--            <el-radio label="0">否</el-radio>-->
<!--            <el-radio label="1">是</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="法定依据:">-->
<!--          <el-input v-model="newItemChild.law" readonly/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查清单:">-->
<!--          <div v-for="(inv, index) in newItemChild.inventory" :key="index" style="display: flex; align-items: center; margin-bottom: 5px;">-->
<!--            <el-input v-model="inv.item" style="width: 90%;" readonly/>-->
<!--          </div>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="责任单位:">-->
<!--          <el-input v-model="newItemChild.checkAgency" readonly/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="执法（检查）人员:">-->
<!--          <el-input v-model="newItemChild.lawEnforcer" readonly/>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <span slot="footer">-->
<!--        <el-button @click="dialogVisibleDetail = false">取消</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
<!--    <el-dialog :visible.sync="noMonthDialogVisible" :title="noMonthDialogVisibleTitle">-->
<!--      <el-form :model="newItemChild" label-width="130px">-->
<!--        <el-form-item label="检查事项标题:">-->
<!--          <el-input v-model="newItemChild.title"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查事项内容:">-->
<!--          <el-input type="textarea" rows="2" v-model="newItemChild.content" />-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查事项类型:">-->
<!--          <el-input v-model="newItemChild.type"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="是否涉企检查事项:">-->
<!--          <el-radio-group v-model="newItemChild.isEnterprise">-->
<!--            <el-radio label="0">否</el-radio>-->
<!--            <el-radio label="1">是</el-radio>-->
<!--          </el-radio-group>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="法定依据:">-->
<!--          <el-input v-model="newItemChild.law"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="检查清单:">-->
<!--          <div v-for="(inv, index) in newItemChild.inventory" :key="index" style="display: flex; align-items: center; margin-bottom: 5px;">-->
<!--            <el-input v-model="inv.item" style="width: 90%;" />-->
<!--            <el-button @click="removeInventory(index)" type="danger" size="mini" style="margin-left: 10px;">删除</el-button>-->
<!--          </div>-->
<!--          <el-button @click="addInventory" type="success" size="mini">新增清单</el-button>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="责任单位:">-->
<!--          <el-input v-model="newItemChild.checkAgency"/>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="执法（检查）人员:">-->
<!--          <el-input v-model="newItemChild.lawEnforcer"/>-->
<!--        </el-form-item>-->
<!--      </el-form>-->
<!--      <span slot="footer">-->
<!--        <el-button @click="noMonthDialogVisible = false">取消</el-button>-->
<!--        <el-button type="primary" @click="noMonthSaveItemChild">保存</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
  </div>
</template>
<script>
import {industryList} from "@/api/triones/industry";
import {pageList,add, edit, getInfo, remove} from "@/api/triones/checkCustom";
import { optionSelect } from '@/api/triones/overt';
export default {
  name: "index",
  data() {
    return {
      loading: true,
      showSearch: true,
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      dataList:[],
      total: 0,
      title: "",
      open: false,
      optionSelect: undefined,
      form: {},
      rules: {
        title: [
          {required: true, message: "迎检计划标题不能为空", trigger: "blur"}
        ],
        deptId: [
          {required: true, message: "制定部门不能为空", trigger: "blur"}
        ],
        // liaison: [
        //   {required: true, message: "联系人不能为空", trigger: "blur"}
        // ],
        // liaisonTel: [
        //   {required: true, message: "联系电话不能为空", trigger: "blur"}
        // ],
        // liaisonAddress: [
        //   {required: true, message: "联系地址不能为空", trigger: "blur"}
        // ],
        richText: [
          {required: true, message: "迎检内容不能为空", trigger: "blur"}
        ],
        contentFile: [
          {required: true, message: "源文件不能为空", trigger: "blur"}
        ]
      },
      industryList: [],
      timelineItems: [],
      currentItemChildIndex: -1,
      newItemChild: {
        title: undefined,
        content: undefined,
        type: undefined,
        isEnterprise: undefined,
        law: undefined,
        inventory: [],
        checkAgency: undefined,
        lawEnforcer: undefined
      },
      dialogVisibleTitle: "",
      dialogVisible: false,
      currentTimelineItem: null,
      dialogVisibleDetail: false,
      noMonthDialogVisible: false,
      noMonthDialogVisibleTitle: "",
      noMonthItems: [],
      noMonthCurrentItemChildIndex: -1,
    }
  },
  created() {
    this.getList();
    this.getDeptList();
    this.getIndustryList();
  },
  methods: {
    getList() {
      this.loading = true;
      pageList(this.queryParams).then(response => {
        this.dataList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    handleAdd() {
      this.reset();
      this.title = "添加迎检计划";
      this.open = true;
    },
    reset() {
      this.form = {
        id: undefined,
        title: undefined,
        checkContent: undefined,
        isMonthShow: '0',
        deptId: undefined,
        sort: 0,
        liaison: undefined,
        liaisonTel: undefined,
        liaisonAddress: undefined,
        richText: undefined,
        contentFile: undefined
      }
      this.resetForm("form");
      this.timelineItems = [];
      this.noMonthItems = [];
    },
    /** 查询部门下拉树结构 */
    getDeptList() {
      optionSelect().then(response => {
        this.optionSelect = response.data;
      });
    },
    getIndustryList() {
      industryList().then(res => {
        this.industryList = res.data;
      })
    },
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.open = true;
          // if (this.form.isMonthShow === '1') {
          //   if (this.timelineItems) {
          //     this.form.checkContent = JSON.stringify(this.timelineItems);
          //   }
          // }
          // if (this.form.isMonthShow === '0') {
          //   if (this.noMonthItems) {
          //     this.form.checkContent = JSON.stringify(this.noMonthItems);
          //   }
          // }
          if (this.form.id != null) {
            edit(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /***************************************************** 按月显示 *****************************************************/
    addTimelineItem() {
      this.timelineItems.push({
        timestamp: '',
        list: [],
        isEditing: true
      });
    },
    toggleEdit(index) {
      const item = this.timelineItems[index];
      item.isEditing = !item.isEditing;
    },
    removeTimelineItem(index) {
      this.timelineItems.splice(index, 1);
    },
    editItemChild(item, indexChild) {
      this.currentItemChildIndex = indexChild;
      const editedItem = item.list[indexChild];
      this.newItemChild = {
        title: editedItem.title,
        content: editedItem.content,
        type: editedItem.type,
        isEnterprise: editedItem.isEnterprise,
        law: editedItem.law,
        inventory: [...editedItem.inventory],
        checkAgency: editedItem.checkAgency,
        lawEnforcer: editedItem.lawEnforcer
      };
      this.currentTimelineItem = item;
      this.dialogVisible = true;
      this.dialogVisibleTitle = "编辑迎检项目";
    },
    removeItemChild(item, indexChild) {
      item.list.splice(indexChild, 1);
    },
    addItemChild(item) {
      this.currentItemChildIndex = -1;
      this.currentTimelineItem = item;
      this.newItemChild = {
        title: undefined,
        content: undefined,
        type: undefined,
        isEnterprise: undefined,
        law: undefined,
        inventory: [],
        checkAgency: undefined,
        lawEnforcer: undefined
      };
      this.dialogVisible = true;
      this.dialogVisibleTitle = "新增迎检项目";
    },
    addInventory() {
      this.newItemChild.inventory.push({ item: '' });
    },
    removeInventory(inv, index) {
      this.newItemChild.inventory.splice(index, 1);
    },
    saveItemChild() {
      if (!this.currentTimelineItem.list) {
        this.currentTimelineItem.list = [];
      }
      if (this.currentItemChildIndex !== -1) {
        this.currentTimelineItem.list.splice(this.currentItemChildIndex, 1);
      }
      this.currentTimelineItem.list.push({
        title: this.newItemChild.title,
        content: this.newItemChild.content,
        type: this.newItemChild.type,
        isEnterprise: this.newItemChild.isEnterprise,
        law: this.newItemChild.law,
        inventory: this.newItemChild.inventory,
        checkAgency: this.newItemChild.checkAgency,
        lawEnforcer: this.newItemChild.lawEnforcer
      });
      this.dialogVisible = false;
    },
    viewItemChild(item, indexChild) {
      const viewedItem = item.list[indexChild];
      this.newItemChild = {
        title: viewedItem.title,
        content: viewedItem.content,
        type: viewedItem.type,
        isEnterprise: viewedItem.isEnterprise,
        law: viewedItem.law,
        inventory: viewedItem.inventory.map(inv => ({ item: inv.item })),
        checkAgency: viewedItem.checkAgency,
        lawEnforcer: viewedItem.lawEnforcer
      };
      this.dialogVisibleDetail = true;
    },
    /***************************************************** 不按月显示 ***************************************************/
    addItemChildNoMonth() {
      this.noMonthCurrentItemChildIndex = -1;
      this.newItemChild = {
        title: undefined,
        content: undefined,
        type: undefined,
        isEnterprise: undefined,
        law: undefined,
        inventory: [],
        checkAgency: undefined,
        lawEnforcer: undefined,
        liaison: undefined,
        liaisonTel: undefined
      };
      this.noMonthDialogVisible = true;
      this.noMonthDialogVisibleTitle = "新增迎检项目";
    },
    noMonthSaveItemChild() {
      if (!this.noMonthItems) {
        this.noMonthItems = [];
      }
      if (this.noMonthCurrentItemChildIndex !== -1) {
        this.noMonthItems.splice(this.noMonthCurrentItemChildIndex, 1);
      }
      this.noMonthItems.push({
        title: this.newItemChild.title,
        content: this.newItemChild.content,
        type: this.newItemChild.type,
        isEnterprise: this.newItemChild.isEnterprise,
        law: this.newItemChild.law,
        inventory: this.newItemChild.inventory,
        checkAgency: this.newItemChild.checkAgency,
        lawEnforcer: this.newItemChild.lawEnforcer
      });
      this.noMonthDialogVisible = false;
    },
    noMonthEditItemChild(index) {
      this.noMonthCurrentItemChildIndex = index;
      const editedItem = this.noMonthItems[index];
      this.newItemChild = {
        title: editedItem.title,
        content: editedItem.content,
        type: editedItem.type,
        isEnterprise: editedItem.isEnterprise,
        law: editedItem.law,
        inventory: [...editedItem.inventory],
        checkAgency: editedItem.checkAgency,
        lawEnforcer: editedItem.lawEnforcer
      };
      this.noMonthDialogVisible = true;
      this.noMonthDialogVisibleTitle = "编辑迎检项目";
    },
    noMonthRemoveItemChild(index) {
      this.noMonthItems.splice(index, 1);
    },
    noMonthViewItemChild(index) {
      const viewedItem = this.noMonthItems[index];
      this.newItemChild = {
        title: viewedItem.title,
        content: viewedItem.content,
        type: viewedItem.type,
        isEnterprise: viewedItem.isEnterprise,
        law: viewedItem.law,
        inventory: viewedItem.inventory.map(inv => ({ item: inv.item })),
        checkAgency: viewedItem.checkAgency,
        lawEnforcer: viewedItem.lawEnforcer
      };
      this.dialogVisibleDetail = true;
    },
    handleEdit(row) {
      this.reset();
      const id = row.id;
      getInfo(id).then(response => {
        this.form = response.data;
        // if (response.data.isMonthShow === '1') {
        //   if (this.timelineItems) {
        //     this.timelineItems = JSON.parse(response.data.checkContent);
        //   }
        // }
        // if (response.data.isMonthShow === '0') {
        //   if (this.noMonthItems) {
        //     this.noMonthItems = JSON.parse(response.data.checkContent);
        //   }
        // }
        this.title = '修改迎检计划';
        this.open = true;
      })
    },
    handleDelete(row) {
      const id = row.id
      this.$modal.confirm('是否确认删除迎检计划标题为"' + row.title + '"的数据项?').then(function() {
        return remove(id);
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
